<template>
  <div style="padding: 20px;">
    <si-search-form
      ref="demo-search-form"
      :loading="loading"
      :form-attrs="formAttrs"
      :form-items="formItems"
      :form-data="formData"
      :table-columns="tableColumns"
      :table-data="tableData"
      :table-attrs="tableAttrs"
      :table-on="tableOn"
      :total="total"
      @query="getList"
    >
      <!-- slot 表格数据插槽 示例 -->
      <template v-slot:status="props">
        <el-button type="danger" size="small">{{
          props.scope.row.status === 0 ? '启用' : '禁用'
        }}</el-button>
      </template>
      <template v-slot:operate="props">
        <el-button
          type="text"
          size="small"
          @click="handleEditRow(props.scope.row)"
        >编辑</el-button>
      </template>
      <!-- slot 查询区域插槽 示例 -->
      <!-- <template v-slot:search-form>
        form
      </template> -->

      <!-- slot 查询区，表格区中间部分 操作按钮 插槽 示例 -->
      <!-- <template v-slot:search-operate>
        <el-button type="danger" size="small">导出</el-button>
      </template> -->

      <!-- slot 表格区插槽 示例 -->
      <!-- <template v-slot:search-table>
        table
      </template> -->
    </si-search-form>
  </div>
</template>

<script>
export default {
  name: 'DemoSearchForm',
  components: {},
  props: [],
  data() {
    const typeList = [
      { label: '批发', value: 1 },
      { label: '零售', value: 2 },
      { label: '餐饮', value: 3 }
    ]
    const cascaderList = [
      {
        value: 'zhinan',
        label: '指南',
        children: [
          {
            value: 'shejiyuanze',
            label: '设计原则',
            children: [
              {
                value: 'yizhi',
                label: '一致'
              },
              {
                value: 'fankui',
                label: '反馈'
              },
              {
                value: 'xiaolv',
                label: '效率'
              },
              {
                value: 'kekong',
                label: '可控'
              }
            ]
          },
          {
            value: 'daohang',
            label: '导航',
            children: [
              {
                value: 'cexiangdaohang',
                label: '侧向导航'
              },
              {
                value: 'dingbudaohang',
                label: '顶部导航'
              }
            ]
          }
        ]
      },
      {
        value: 'zujian',
        label: '组件',
        children: [
          {
            value: 'basic',
            label: 'Basic',
            children: [
              {
                value: 'layout',
                label: 'Layout 布局'
              },
              {
                value: 'color',
                label: 'Color 色彩'
              },
              {
                value: 'typography',
                label: 'Typography 字体'
              },
              {
                value: 'icon',
                label: 'Icon 图标'
              },
              {
                value: 'button',
                label: 'Button 按钮'
              }
            ]
          },
          {
            value: 'form',
            label: 'Form',
            children: [
              {
                value: 'radio',
                label: 'Radio 单选框'
              },
              {
                value: 'checkbox',
                label: 'Checkbox 多选框'
              },
              {
                value: 'input',
                label: 'Input 输入框'
              },
              {
                value: 'input-number',
                label: 'InputNumber 计数器'
              },
              {
                value: 'select',
                label: 'Select 选择器'
              },
              {
                value: 'cascader',
                label: 'Cascader 级联选择器'
              },
              {
                value: 'switch',
                label: 'Switch 开关'
              },
              {
                value: 'slider',
                label: 'Slider 滑块'
              },
              {
                value: 'time-picker',
                label: 'TimePicker 时间选择器'
              },
              {
                value: 'date-picker',
                label: 'DatePicker 日期选择器'
              },
              {
                value: 'datetime-picker',
                label: 'DateTimePicker 日期时间选择器'
              },
              {
                value: 'upload',
                label: 'Upload 上传'
              },
              {
                value: 'rate',
                label: 'Rate 评分'
              },
              {
                value: 'form',
                label: 'Form 表单'
              }
            ]
          },
          {
            value: 'data',
            label: 'Data',
            children: [
              {
                value: 'table',
                label: 'Table 表格'
              },
              {
                value: 'tag',
                label: 'Tag 标签'
              },
              {
                value: 'progress',
                label: 'Progress 进度条'
              },
              {
                value: 'tree',
                label: 'Tree 树形控件'
              },
              {
                value: 'pagination',
                label: 'Pagination 分页'
              },
              {
                value: 'badge',
                label: 'Badge 标记'
              }
            ]
          },
          {
            value: 'notice',
            label: 'Notice',
            children: [
              {
                value: 'alert',
                label: 'Alert 警告'
              },
              {
                value: 'loading',
                label: 'Loading 加载'
              },
              {
                value: 'message',
                label: 'Message 消息提示'
              },
              {
                value: 'message-box',
                label: 'MessageBox 弹框'
              },
              {
                value: 'notification',
                label: 'Notification 通知'
              }
            ]
          },
          {
            value: 'navigation',
            label: 'Navigation',
            children: [
              {
                value: 'menu',
                label: 'NavMenu 导航菜单'
              },
              {
                value: 'tabs',
                label: 'Tabs 标签页'
              },
              {
                value: 'breadcrumb',
                label: 'Breadcrumb 面包屑'
              },
              {
                value: 'dropdown',
                label: 'Dropdown 下拉菜单'
              },
              {
                value: 'steps',
                label: 'Steps 步骤条'
              }
            ]
          },
          {
            value: 'others',
            label: 'Others',
            children: [
              {
                value: 'dialog',
                label: 'Dialog 对话框'
              },
              {
                value: 'tooltip',
                label: 'Tooltip 文字提示'
              },
              {
                value: 'popover',
                label: 'Popover 弹出框'
              },
              {
                value: 'card',
                label: 'Card 卡片'
              },
              {
                value: 'carousel',
                label: 'Carousel 走马灯'
              },
              {
                value: 'collapse',
                label: 'Collapse 折叠面板'
              }
            ]
          }
        ]
      },
      {
        value: 'ziyuan',
        label: '资源',
        children: [
          {
            value: 'axure',
            label: 'Axure Components'
          },
          {
            value: 'sketch',
            label: 'Sketch Templates'
          },
          {
            value: 'jiaohu',
            label: '组件交互文档'
          }
        ]
      }
    ]
    return {
      restaurants: [],
      timeout: null,
      loading: false,
      formAttrs: {
        'hide-required-asterisk': false,
        rules: {
          // projectName: [
          //   { required: true, message: '请输入项目名称...', trigger: 'blur' }
          // ],
          // introduce: [
          //   { required: true, message: '请输入项目描述...', trigger: 'blur' }
          // ],
          // type: [
          //   { required: true, message: '请选择项目类型...', trigger: 'change' }
          // ],
          // multiple: [
          //   { required: true, message: '请选择项目类型...', trigger: 'change' }
          // ],
          // date: [
          //   { required: true, message: '请选择日期...', trigger: 'change' }
          // ],
          // dates: [
          //   { required: true, message: '请选择日期...', trigger: 'change' }
          // ],
          // time: [
          //   { required: true, message: '请选择时间...', trigger: 'change' }
          // ],
          // dateTime: [
          //   { required: true, message: '请选择日期时间...', trigger: 'change' }
          // ],
          // dateTimes: [
          //   { required: true, message: '请选择日期范围...', trigger: 'change' }
          // ]
        }
      },
      formData: {
        projectName: '',
        type: '',
        multiple: [],
        date: '',
        dates: '',
        time: '',
        dateTime: '',
        dateTimes: ''
      },
      formItems: [
        {
          label: '输入框',
          prop: 'projectName',
          type: 'Input',
          on: {
            change: this.handleDel
          },
          attrs: {
            placeholder: '搜索输入框'
          }
        },
        {
          label: '搜索输入框',
          prop: 'projectName2',
          type: 'Input',
          attrs: {
            width: '320px',
            placeholder: '搜索输入框',
            'fetch-suggestions': this.querySearchAsync
          }
        },
        {
          label: '单选',
          prop: 'type',
          type: 'Select',

          attrs: {
            placeholder: '请选择项目类型...',
            options: typeList
          },
          on: {
            change: this.typeChange
          }
        },
        {
          label: '多选',
          prop: 'multiple',
          type: 'Select',
          attrs: {
            multiple: true,
            collapseTags: true,
            placeholder: '请选择项目类型...',
            options: typeList
          },
          on: {
            change: this.typeChange
          }
        },
        {
          label: '级联',
          prop: 'cascader',
          type: 'Cascader',
          attrs: {
            filterable: true,
            placeholder: '请选择项目类型...',
            options: cascaderList
          },
          on: {
            change: this.typeChange
          }
        },
        {
          label: '日期',
          prop: 'date',
          type: 'Date',
          attrs: {
            type: 'date',
            placeholder: '请选择日期...'
          }
        },
        {
          label: '日期范围',
          prop: 'dates',
          type: 'Date',
          attrs: {
            type: 'daterange',
            placeholder: '请选择日期范围...',
            'start-placeholder': '开始日期',
            'end-placeholder': '开始日期',
            'range-separator': '至'
          }
        },
        {
          label: '日期时间',
          prop: 'dateTime',
          type: 'Date',
          attrs: {
            type: 'datetime',
            placeholder: '请选择日期时间...'
          }
        },
        {
          label: '日期时间范围',
          prop: 'dateTimes',
          type: 'Date',
          attrs: {
            type: 'datetimerange',
            placeholder: '请选择日期范围...',
            'start-placeholder': '开始日期',
            'end-placeholder': '开始日期',
            'range-separator': '至'
          }
        },
        {
          label: '时间',
          prop: 'time',
          type: 'Time',
          attrs: {
            placeholder: '请选择时间...'
          }
        }
      ],
      tableColumns: [
        {
          width: '55',
          type: 'selection'
        },
        {
          prop: 'date',
          label: '日期',
          sortable: true
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'status',
          label: '状态',
          slotName: 'status'
        },
        {
          prop: 'address',
          label: '地址',
          width: '400px'
        },
        {
          prop: 'gender',
          label: '性别',
          render: row => {
            return row.gender === 0 ? '女' : '男'
          }
        },
        {
          prop: 'operate',
          label: '操作',
          slotName: 'operate'
        }
      ],
      tableData: [],
      // table所有属性
      tableAttrs: {},
      // table所有事件
      tableOn: {
        select: (selection, row) => {
          console.log('selection=>', selection)
          console.log('row=>', row)
        },
        'selection-change': selection => {
          console.log('selection=>selection-change=>', selection)
        }
      },
      // 总条数
      total: 0
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    loadAll() {
      return [
        { value: '三全鲜食（北新泾店）', address: '长宁区新渔路144号' },
        {
          value: 'Hot honey 首尔炸鸡（仙霞路）',
          address: '上海市长宁区淞虹路661号'
        },
        {
          value: '新旺角茶餐厅',
          address: '上海市普陀区真北路988号创邑金沙谷6号楼113'
        },
        { value: '泷千家(天山西路店)', address: '天山西路438号' },
        {
          value: '胖仙女纸杯蛋糕（上海凌空店）',
          address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101'
        },
        { value: '贡茶', address: '上海市长宁区金钟路633号' },
        {
          value: '豪大大香鸡排超级奶爸',
          address: '上海市嘉定区曹安公路曹安路1685号'
        },
        {
          value: '茶芝兰（奶茶，手抓饼）',
          address: '上海市普陀区同普路1435号'
        },
        { value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
        { value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
        { value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
        { value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
        {
          value: 'Monica摩托主题咖啡店',
          address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F'
        },
        {
          value: '浮生若茶（凌空soho店）',
          address: '上海长宁区金钟路968号9号楼地下一层'
        },
        { value: 'NONO JUICE  鲜榨果汁', address: '上海市长宁区天山西路119号' },
        { value: 'CoCo都可(北新泾店）', address: '上海市长宁区仙霞西路' },
        {
          value: '快乐柠檬（神州智慧店）',
          address: '上海市长宁区天山西路567号1层R117号店铺'
        },
        {
          value: 'Merci Paul cafe',
          address: '上海市普陀区光复西路丹巴路28弄6号楼819'
        },
        {
          value: '猫山王（西郊百联店）',
          address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306'
        },
        { value: '枪会山', address: '上海市普陀区棕榈路' },
        { value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
        { value: '钱记', address: '上海市长宁区天山西路' },
        { value: '壹杯加', address: '上海市长宁区通协路' },
        {
          value: '唦哇嘀咖',
          address: '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元'
        },
        { value: '爱茜茜里(西郊百联)', address: '长宁区仙霞西路88号1305室' },
        {
          value: '爱茜茜里(近铁广场)',
          address:
            '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺'
        },
        {
          value: '鲜果榨汁（金沙江路和美广店）',
          address: '普陀区金沙江路2239号金沙和美广场B1-10-6'
        },
        {
          value: '开心丽果（缤谷店）',
          address: '上海市长宁区威宁路天山路341号'
        },
        { value: '超级鸡车（丰庄路店）', address: '上海市嘉定区丰庄路240号' },
        { value: '妙生活果园（北新泾店）', address: '长宁区新渔路144号' },
        { value: '香宜度麻辣香锅', address: '长宁区淞虹路148号' },
        {
          value: '凡仔汉堡（老真北路店）',
          address: '上海市普陀区老真北路160号'
        },
        { value: '港式小铺', address: '上海市长宁区金钟路968号15楼15-105室' },
        { value: '蜀香源麻辣香锅（剑河路店）', address: '剑河路443-1' },
        { value: '北京饺子馆', address: '长宁区北新泾街道天山西路490-1号' },
        {
          value: '饭典*新简餐（凌空SOHO店）',
          address: '上海市长宁区金钟路968号9号楼地下一层9-83室'
        },
        {
          value: '焦耳·川式快餐（金钟路店）',
          address: '上海市金钟路633号地下一层甲部'
        },
        { value: '动力鸡车', address: '长宁区仙霞西路299弄3号101B' },
        { value: '浏阳蒸菜', address: '天山西路430号' },
        { value: '四海游龙（天山西路店）', address: '上海市长宁区天山西路' },
        {
          value: '樱花食堂（凌空店）',
          address: '上海市长宁区金钟路968号15楼15-105室'
        },
        { value: '壹分米客家传统调制米粉(天山店)', address: '天山西路428号' },
        {
          value: '福荣祥烧腊（平溪路店）',
          address: '上海市长宁区协和路福泉路255弄57-73号'
        },
        {
          value: '速记黄焖鸡米饭',
          address: '上海市长宁区北新泾街道金钟路180号1层01号摊位'
        },
        { value: '红辣椒麻辣烫', address: '上海市长宁区天山西路492号' },
        {
          value: '(小杨生煎)西郊百联餐厅',
          address: '长宁区仙霞西路88号百联2楼'
        },
        { value: '阳阳麻辣烫', address: '天山西路389号' },
        {
          value: '南拳妈妈龙虾盖浇饭',
          address: '普陀区金沙江路1699号鑫乐惠美食广场A13'
        }
      ]
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    handleSelect(item) {
      console.log(item)
    },
    getList(params) {
      this.$refs['demo-search-form'].$refs['si-search-form'].validate(valid => {
        this.$notify({
          title: '参数',
          message: params
        })
        this.loading = true
        if (valid) {
          this.loading = false
          this.tableData = [
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              gender: 0,
              status: 0
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
              gender: 1,
              status: 1
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              gender: 0,
              status: 1
            },
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
              gender: 0,
              status: 0
            }
          ]
          this.total = 100
          console.log('success submit!!')
        } else {
          this.loading = false
          console.log('error submit!!')
        }
      })
    },
    typeChange(val) {
      console.log(val)
    },
    handleEdit(row) {
      console.log('row-728: ' + row)
      alert('编辑')
    },
    handleDel(row) {
      console.log('row-732: ' + row)
      alert('删除')
    },
    tableSelectionChange(rows) {
      console.log(rows)
    },
    handleEditRow(rows) {
      console.log('handleEditRow=>', rows)
    }
  }
}
</script>

<style lang="scss" scoped></style>
